<template>
  <div class="home-container">
    <!-- 推荐歌单 -->
    <van-cell class="title" title="推荐歌单" />
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="item in recommendList" :key="item.id">
        <van-image width="111" height="100" :src="item.picUrl" />
        <p class="music-name van-multi-ellipsis--l2">{{ item.name }}</p>
      </van-grid-item>
    </van-grid>

    <van-cell class="title" title="最佳匹配" />
    <div class="main">
      <!-- <van-cell
        v-for="obj in songList"
        :key="obj.id"
        :label="obj.song.artists[0].name"
        :title="obj.name"
      >
        <template>
          <van-icon color="#000" name="play-circle-o" size="28" />
        </template>
      </van-cell> -->
      <SongItem
        v-for="obj in songList"
        :key="obj.id"
        :name="obj.name"
        :author="obj.song.artists[0].name"
        :id="obj.id"
      ></SongItem>
    </div>
  </div>
</template>

<script>
import { recommendMusic, newMusic } from '@/api/music.js'
export default {
  data() {
    return {
      recommendList: [],
      songList: [],
    }
  },
  async created() {
    let res = await recommendMusic({
      limit: 6,
    })
    // console.log(res.data)
    this.recommendList = res.data.result

    let res2 = await newMusic({
      limit: 30,
    })
    // console.log(res.data)
    this.songList = res2.data.result
  },
}
</script>

<style scoped lang="less">
.home-container {
  .title {
    background-color: #1989fa;
    color: #fff;
  }

  .music-name {
    font-size: 12px;
    text-align: left;
    line-height: 20px;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    height: 37px;
  }

  /deep/.van-grid-item__content {
    padding: 10px 0px;
  }
  .main {
    padding-bottom: 50px;
  }
}
</style>
